:host {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 500px;
  max-width: 100%;
  overflow: hidden;
}

.mat-mdc-nav-list .mat-mdc-list-item {
  @apply text-white rounded-lg duration-300;

  &.active {
    @apply bg-slate-50 text-slate-500;
  }
}

input.mat-mdc-input-element {
  @apply caret-yellow-500;
}

.ngm-input.mat-mdc-input-element {
  @apply p-2 rounded-sm;

  &:focus {
    @apply right-2 ring-yellow-200 ring-offset-2 bg-slate-200;
  }
}

.ngm-select {
  @apply bg-transparent hover:bg-slate-100 focus:bg-slate-200;
}

.ngm-fileover {
  @apply bg-gray-100;
}

.mat-stepper-vertical, .mat-stepper-horizontal {
  --mat-stepper-container-color: transparent;
}

input.mat-mdc-input-element {
  @apply caret-yellow-500 bg-transparent outline-none;
}

.ngm-input.mat-mdc-input-element {
  @apply p-2 rounded-sm hover:bg-slate-200;

  &:focus {
    @apply right-2 ring-yellow-200 ring-offset-2 bg-slate-300;
  }
}

.ngm-select {
  @apply bg-transparent ;
}
